<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-1.10.2.js"></script>
    <style type="text/css">
        #window{
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;
            -webkit-transform-style: preserve-3d;
            position: relative;
        }
        .page{
            width: 300px;
            height: 300px;
            background-color: #000000;
            color: #ffffff;
            font-size: 300px;
            font-weight: bold;
            text-align: center;
            position: absolute;
            margin: 0% 35%;
            -webkit-transition: -webkit-transform 2s;
            overflow: hidden;
        }
        #page6{
            -webkit-transform-origin: bottom;
        }
        #page1, #page2, #page3, #page4, #page5{
            -webkit-transform-origin: bottom;
            -webkit-transform: rotateX(90deg);
        }
    </style>
    <script type="text/javascript">
        var index = 6;
        function next(){
            if(index == 6){
                return;
            }
            $("#page"+index).css({
                "-webkit-transform":"rotateX(90deg)"
            });
            $("#page"+(index+1)).css({
                "-webkit-transform":"rotateX(0deg)"
            });
            index++;
        }

        function prev(){
            if(index == 1){
                return;
            }
            $("#page"+index).css({
                "-webkit-transform":"rotateX(-270deg)"
            });
            $("#page"+(index-1)).css({
                "-webkit-transform":"rotateX(0deg)"
            });
            index--;
        }
    </script>
</head>
<body>
    <div id="window">
        <div id="pages">
            <div id="page1" class="page">1</div>
            <div id="page2" class="page">2</div>
            <div id="page3" class="page">3</div>
            <div id="page4" class="page">4</div>
            <div id="page5" class="page">5</div>
            <div id="page6" class="page">6</div>
        </div>
    </div>
    <button type="button" onclick="next()">next</button>
    <button type="button" onclick="prev()">prev</button>
</body>
</html>